
<template>
  <a-modal
    title="下单"
    :width="1000"
    :visible="visible"
    :confirmLoading="loading"
    @ok="submit"
    @cancel="() => { $emit('cancel') }"
    okText="下单"
    cancelText="取消"
  >
    <div class="detailBox" v-if="model">
      <div class="topBox">
        <div class="leftBox">
          <img :src="model.image" alt="">
          <div class="title line">
            <span style="margin-right: 20px;">{{model.name}}</span>
            <a-button type="primary" @click="submit">
              下单
            </a-button>
          </div>
          <div class="line">
            <span class="label">商品码：</span>
            <span class="value">{{model.code||'添加商品的时候生成'}}</span>
          </div>
          <!-- <div class="line">
            <span class="label">销量：</span>
            <span class="value">----</span>
          </div> -->
          
          <div class="line" v-if="specsList.length>0">
            <span class="label">规格：</span>
            <!-- <a-radio-group @change="changeSku" style="float: left;word-wrap: break-word;">
              <a-radio-button v-for="(item,index) in specsList" :value="item.id" style="float: left;word-wrap: break-word;">
                {{item.name}}
              </a-radio-button>
            </a-radio-group> -->
            <div class="spectsBox">
            	<div class="itemSpecs" :class="activeSpect===index?'activeBorder':'unactiveBorder'" v-for="(item,index) in specsList" @click="changeSku(item,index)">
            		{{item.name}}
            	</div>
            </div>
          </div>
          <div v-if="skuItem">
            <div class="line">
              <span class="label">门市价：</span>
              <span class="value">{{skuItem.unified_price||'--'}}￥</span>
            </div>
            <div class="line">
              <span class="label">{{user_type_price=='trade_price'?'批发价':user_type_price=='channel_price'?'渠道价':'分销价'}}：</span>
              <span class="value">{{skuItem[user_type_price]}}￥</span>
            </div>
            <div class="line">
              <span class="label">库存：</span>
              <span class="value">{{skuItem.stock}}</span>
            </div>
            <div class="line">
              <span class="label">起购数量：</span>
              <span class="value">{{skuItem.set_num}}</span>
            </div>
            <div class="line">
              <span class="label">限购数量：</span>
              <span class="value">{{skuItem.quota}}</span>
            </div>
          </div>
          
          <div class="line">
            <span class="label">抢购时间段：</span>
            <span class="value">{{model.srush_time}}~{{model.drush_time}}</span>
          </div>
          <div class="line">
            <span class="label">有效期：</span>
            <span class="value">{{model.starttime}}~{{model.endtime}}</span>
          </div>
          <div class="line">
            <span class="label">是否预定：</span>
            <span class="value">{{model.is_need_appointment==1?'是':'否'}}</span>
          </div>
          <div class="line">
            <span class="label">是否需要身份证：</span>
            <span class="value">{{model.is_need_idcard==1?'是':'否'}}</span>
          </div>
          <div class="line">
            <span class="label">取货方式：</span>
            <span class="value">{{model.is_type==1?'快递':'到店'}}</span>
          </div>
          <!-- <div class="line">
            <span class="label">供应商：</span>
            <span class="value">{{model.supplier_name}}</span>
          </div>
          <div class="line">
            <span class="label">供应商联系方式：</span>
            <span class="value">{{model.supplier_mobile}}</span>
          </div> -->
          <div class="line" v-if="model.remark">
            <div class="label">备注：</div>
            <div class="value">{{model.remark}}</div>
          </div>
          <!-- <div class="line" style="text-align: right;">
            <a-button type="primary" @click="submit">
              下单
            </a-button>
          </div> -->
        </div>
        <div class="rightBox">
          
        </div>
      </div>
      <div class="detailBox margT10">
        <div class="label">详情:</div>
        <div class="detail" v-html="model.detailed"></div>
      </div>
    </div>
    <a-modal title="填写下单资料"
      :width="600"
      :visible="visibleFormModal"
      :confirmLoading="loading4FormModal"
      @ok="submitForm"
      @cancel="() => { this.visibleFormModal = false }"
      okText="确认下单"
      cancelText="取消">
      <div class="formBox">
        <div class="item">
          <span>购买数量:</span>
          <a-input :maxLength="10" v-model="num" @blur="validateNum('num')" placeholder="请填写购买数量"/>
          <!-- <div>{{error_msg}}</div> -->
        </div>
        <div class="item">
          <span>手机号:</span>
          <a-input
            :maxLength="11" @blur="validateNum('mobile')" 
            v-model="merchantInfo.mobile"
            placeholder="请填写联系人手机号"
          />
        </div>
        <div v-if="model.is_type==1">
          <div class="item">
            <span>联系人:</span>
            <a-input
              :maxLength="20"
              v-model="merchantInfo.contacts"
              placeholder="请填写联系人"
            />
          </div>
          
          <div class="item">
            <span>收件地址:</span>
            <a-input
              :maxLength="50"
              v-model="merchantInfo.address"
              placeholder="请填写收件地址"
            />
          </div>
        </div>
        <div class="item" v-if="model.is_need_idcard==1">
          <span>身份证号:</span>
          <a-input
            :maxLength="18" @blur="validateNum('idcard')" 
            v-model="merchantInfo.idcard"
            placeholder="请填写身份证号"
          />
        </div>
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import moment from 'moment'

import { mapGetters,mapActions } from 'vuex'
// 表单字段
// const fields = ['id', 'name', 'sex', 'stu_id', 'idcard', 'area', 'address', 'politics', 'education', 'hobby', 'birthday', 'mobile']
const fields = ['id','name', 'code', 'type', 'name', 'price', 'count', 'duo', 
'xian','shouxufei','validDay','form.starttime','providerName']
const formLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 7 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 13 }
  }
}
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  components: {
  },
  data () {
    
    return {
      visibleFormModal:false,
      loading4FormModal:false,
      user_type_price:'',
      isShow: false,
      form: this.$form.createForm(this),
      formLayout:formLayout,
      num:'',
      merchantInfo:{},
      activeSpect:'',
      specs_id:''
    }
  },
  watch:{
    visible:{
      handler(newValue) {
        if(newValue){
          this.getMerchantItem();
        }
      },
      // immediate: true,
      deep: true
    }
  },
  computed:{
      ...mapGetters(['specsList','spects_model','skuItem']),
  },
  created () {
    this.user_type_price = localStorage.getItem('user_type_price')
    // this.onChangeSelectTime()
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      console.log("model",this.model)
      if(this.model && this.model.id > 0) {
        this.isShow = true
        this.model && this.form.setFieldsValue(pick(this.model, fields))
      } else {
        this.isShow = false
      }
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  mounted() {
  },
  methods: {
    moment,
    ...mapActions(['SET_SPECTS_LIST','SET_SPECTS_MODEL','SET_SKU_ITEM']),
    validateNum(type) {
      if(type=='num'){
        if(!this.$reg.digit.test(this.num.trim())){
          this.$message.error('请正确填写购买数量')
        }
      }else if(type=='idcard'){
        if(!this.$reg.idCard.test(this.merchantInfo.idcard.trim())){
          this.$message.error('请正确填写身份证号')
        }
      }else if(type=='mobile'){
        if(!this.$reg.phone.test(this.merchantInfo.mobile.trim())){
          this.$message.error('请正确填写手机号')
        }
      }
    },
    submitForm() {
      if(!this.$reg.digit.test(this.num.trim())){
        this.$message.error('请正确填写购买数量')
        return
      }
      
      let val = {}
      
      if(this.model.is_need_idcard==1){// 是否需要身份证号 is_need_idcard == 1 是
        if(!this.$reg.idCard.test(this.merchantInfo.idcard.trim())){
          this.$message.error('请正确填写身份证号')
          return
        }else{
          val.idcard =  this.merchantInfo.idcard
        }
      }
      
      if(!this.$reg.phone.test(this.merchantInfo.mobile.trim())){
        this.$message.error('请正确填写手机号')
        return
      }else{
        val.mobile = this.merchantInfo.mobile
      }
      // is_type == 1 为快递  2 为到店自提
      if(this.model.is_type==1){
        val.contacts = this.merchantInfo.contacts
        val.address = this.merchantInfo.address
      }
           
      const params = {
        product_id: this.model.id,
        merchant_id:localStorage.getItem('merchant_id'),
        specs_id: this.spects_model,
        price: this.skuItem[this.user_type_price],
        num:this.num,
        val: (val),//JSON.stringify
      }
      this.$api.OrderSave(params).then(res=>{
        if(res.ret==200){
          this.$message.success('下单成功')
          this.$emit('cancel')
          this.visibleFormModal = false
        }
      })
    },
    submit() {
      if(!this.specs_id){
        this.$message.info('请选择规格')
      }else{
        this.visibleFormModal = true
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getMerchantItem() {
      const params = {
        id: localStorage.getItem('merchant_id')
      }
      this.$api.MerchantItem(params).then(res=>{
        this.merchantInfo = res.data
      })
    },
    changeSku(item,index) {
      this.activeSpect = index
      const id = item.id
      this.specs_id = id
      this.SET_SPECTS_MODEL(id)
      const skuItem = this.specsList.filter(res=>res.id==id)[0]
      this.SET_SKU_ITEM(skuItem)
    },
    getProductItem(id) {
      const params = {
        id
      }
      this.$api.ProductItem(params).then(res => {
        this.item = res.data
      })
    },
    onChangeSelectTime(dates, dateStrings) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    },
    // 搜素模糊查询
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
  }
}
</script>
<style lang="less" scoped>
.lineItem{margin-top: 10px;}
.ant-radio-group{
  display: flex !important;
  align-items: center;
}
// .ant-form-item{
//   width:100%;
// }
.ant-radio-wrapper{
  display: flex !important;
  align-items: center;
}
.spectsBox{
    margin-top: 10px;
  	padding: 10px 16px;
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: flex-start;
    cursor: pointer;
  	.itemSpecs{
  		padding: 5px 4px;
  		border-radius: 3px;
  		margin-bottom: 10px;
  		margin-right: 12px;
  		line-height: 1.3em;
  		&.activeBorder{
  			color: green;
  			border: 1px solid green;
  		}
  		&.unactiveBorder{
  			color: #333333;
  			border: 1px solid #666666;
  		}
  	}
  }
.detailBox{
  .topBox{
    display: flex;
    flex-direction: row;
    overflow: hidden;
    img{
      width: 500px;
      height: 400px;
      object-fit: cover;
    }
    .title{
      margin-top:12px;
      font-size: 18px;
      font-weight: bold;
    }
    .line{
      margin-bottom:4px;
      .label{
        width:150px;
        display: inline-block;
      }
    }
  }
}
.formBox{
    width: 300px;
    .item{
      width: 100%;
      margin-top: 10px;
      span{
        // display: block;
        padding-bottom: 3px;
      }
    }
  }
</style>
